<template>
  <div class="xlink">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" >mqtt协议</el-menu-item>
      <el-menu-item index="2" >socket协议</el-menu-item>
      <el-menu-item index="3" >订阅设备</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      activeIndex: '1'
    }
  },

  mounted () {
    this.$router.push('mqtt')
  },

  methods: {
    handleSelect (key, keyPath) {
      if (key === '1') {
        this.$router.push('mqtt')
      } else if (key === '2') {
        this.$router.push('websocket')
      } else {
        this.$router.push({path: 'user-bind-device'})
      }
    }
  }
}
</script>
<style scoped>
.xlink {
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>

